<template>
	<view class="wrap">
		<view class="header">
			<view class="userInfo" v-if="authStore.isLogin">
				<view @click="onTargetMenus('/pages/user/info')">
					<image
						:src="authStore.userInfo.avatarUrl || `https://tianliyx.oss-cn-shanghai.aliyuncs.com/images/20250305/0166764001741159137.png`"
						class="user_avatar"></image>
					<text class="user_name"> {{ authStore.userInfo.nick_name }} </text>
				</view>
			</view>


			<view class="userInfo" v-else>
				<view @click="COMMON.toLogin">
					<image src="https://tianliyx.oss-cn-shanghai.aliyuncs.com/images/20250305/0166764001741159137.png"
						class="user_avatar"></image>
					<text class="user_name">点击登录</text>
				</view>
			</view>
		</view>

		<view class="user_wrap">
			<view class="grade_box" v-if="authStore.isLogin">
				<view class="grade">
					<u-icon name="integral" size="26" :label="grade_name" color="#ffc06f" labelSize="14"
						labelColor="#ffc06f"></u-icon>
				</view>
			</view>


			<view class="order_box">
				<view class="order_all">
					<text class="order_title">我的订单</text>
					<view class="order_more" @click="onTargetMenus('/pages/order/index?type=0')">查看全部订单<text
							class="iconfont icon-xiayiyeqianjinchakangengduo"></text>
					</view>
				</view>
				<view class="order_status">
					<view class="order_item" @click="onTargetMenus('/pages/order/index?type=1')">
						<u-badge type="warning" :absolute="true" :offset="[0, 10]" max="99"
							:value="tips_num.pay"></u-badge>
						<text class="iconfont icon-31daifukuan"></text>
						<text class="item_text">待付款</text>
					</view>
					<view class="order_item" @click="onTargetMenus('/pages/order/index?type=2')">
						<u-badge type="warning" :absolute="true" :offset="[0, 10]" max="99" :value="tips_num.delivery">
						</u-badge>
						<text class="iconfont icon-daifahuo"></text>
						<text class="item_text">待发货</text>
					</view>
					<view class="order_item" @click="onTargetMenus('/pages/order/index?type=3')">
						<u-badge type="warning" :absolute="true" :offset="[0, 10]" max="99" :value="tips_num.receipt">
						</u-badge>
						<text class="iconfont icon-daishouhuo"></text>
						<text class="item_text">待收货</text>
					</view>
					<view class="order_item" @click="onTargetMenus('/pages/refund/index?status=0')">
						<text class="iconfont icon-tuihuoshouhou"></text>
						<text class="item_text">售后/退款</text>
					</view>
				</view>
			</view>


			<view class="order_box">
				<view class="order_all">
					<text class="order_title">我的服务</text>
				</view>
				<view class="order_status order_status_1">

					<view class="order_item" @click="onTargetMenus('/pages/coupon/receive')">
						<text class="iconfont icon-lingquanzhongxin"></text>
						<text class="item_text">领券中心</text>
					</view>
					<view class="order_item" @click="onTargetMenus('/pages/coupon/discount')">
						<text class="iconfont icon-wodeyouhuiquan"></text>
						<text class="item_text">我的优惠券</text>
					</view>
					<view class="order_item" @click="onTargetMenus('/pages/address/index')">
						<text class="iconfont icon-dizhi"></text>
						<text class="item_text">我的地址</text>
					</view>
					<view class="order_item" @click="onTargetMenus('/pages/invoice/index')">
						<text class="iconfont icon-fapiao"></text>
						<text class="item_text">发票抬头</text>
					</view>

					<!-- <view class="order_item" @click="onTargetMenus('/pages/coupon/private')">
						<text class="iconfont icon-wodeyouhuiquan"></text>
						<text class="item_text">体验优惠券</text>
					</view>
					<view class="order_item" @click="onTargetMenus('/pages/coupon/promotion')">
						<text class="iconfont icon-wodeyouhuiquan"></text>
						<text class="item_text">推广优惠券</text>
					</view> -->

					<view class="m20"></view>
					<view class="order_item" @click="onTargetMenus('/pages/procure/index')"
						v-if="authStore.isLogin && is_purchaser == 1">
						<text class="iconfont icon-gouwuche"></text>
						<text class="item_text">采购中心</text>
					</view>

					<view class="order_item" @click="openPrivacyContract">
						<text class="iconfont icon-bangzhuzhongxin"></text>
						<text class="item_text">隐私协议</text>
					</view>


					<view class="order_item">
						<button class="contact" open-type="contact" id="contact"></button>
						<text class="iconfont icon-zaixiankefu"></text>
						<text class="item_text">在线客服</text>
					</view>
				</view>
			</view>
			<button class="p_btn" @click="outLogin" v-if="authStore.isLogin">退出登录</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		COMMON
	} from "../../utils/commom.js"
	import {
		useAuthStore
	} from '@/stores/user.js';
	import {
		get_user_grade
	} from '@/api/user.js';
	import {
		order_count,
		cart_count
	} from '@/api/order.js';

	const authStore = useAuthStore();

	const grade_name = ref(null);
	const tips_num = ref({});
	const is_purchaser = ref(0)


	// 初始化登录状态
	onShow(() => {
		authStore.initialize();
		if (authStore.isLogin) {
			get_grade();
			get_order_count();
			COMMON.get_cart_count();
		}
	})

	function get_order_count() {
		order_count().then(res => {
			let data = res.data;
			tips_num.value = data;
		})
	}

	function get_grade() {
		get_user_grade().then(res => {
			let data = res.data;
			grade_name.value = data.name;
			is_purchaser.value = data.is_purchaser
		})
	}

	function openPrivacyContract() {
		wx.openPrivacyContract({
			fail: () => {
				uni.showToast({
					title: '网络错误',
					icon: 'error',
				});
			},
		});
	}

	// 退出登录
	function outLogin() {
		uni.hideTabBarRedDot({
			index: 2,
		})
		tips_num.value = {};
		authStore.setLogin(false, {});
		authStore.initialize();
		uni.showToast({
			title: '已退出登录！'
		});
	}

	function onTargetMenus(url) {
		if (!authStore.isLogin) {
			COMMON.toLogin();
		} else {
			uni.navigateTo({
				url
			});
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 340rpx;
		background-image: url('https://tianliyx.oss-cn-shanghai.aliyuncs.com/miniprogram/user-header.png');
		border-radius: 0 0 20px 20px;
		background-size: cover;
		background-position: center;

		.userInfo {
			padding: 140rpx 60rpx 0;
			overflow: hidden;

			.user_avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 100%;
				float: left;
				overflow: hidden;
				border: 2px solid #fff;
			}

			.user_name {
				float: left;
				padding: 40rpx;
				color: #fb9b1c;
				font-size: 30rpx;
			}

		}
	}

	.user_wrap {
		width: 95%;
		overflow: hidden;
		margin: 20rpx auto;

		.grade_box {
			overflow: hidden;
			border-radius: 10px;

			.grade {
				background-color: #433232;
				padding: 20rpx;
			}
		}

		.m20 {
			width: 100%;
			overflow: hidden;
			margin: 10px 0;
		}

		.order_box {
			width: 100%;
			background: #fff;
			overflow: hidden;
			margin: 20rpx 0;
			border-radius: 10px;

			.order_all {
				padding: 20rpx 30rpx;
				overflow: hidden;
				border-bottom: 1px solid #f2f2f2;

				.order_title {
					font-size: 30rpx;
					float: left;
					color: #666;
				}

				.order_more {
					float: right;
					color: #fb9b1c;
					font-size: 26rpx;
					margin-top: 6rpx;
				}
			}

			.order_status {
				width: 100%;
				overflow: hidden;
				padding: 30rpx 15rpx;

				.order_item {
					text-align: center;
					color: #fb9b1c;
					position: relative;
					height: 110rpx;
					width: 25%;
					float: left;

					.iconfont {
						font-size: 44rpx;
						display: block;
						padding: 10rpx 0;
					}

					.item_text {
						font-size: 26rpx;
					}
				}
			}

			#contact {
				opacity: 0;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
			}
		}

		.p_btn {
			border: none;
			width: 100%;
			margin: 10px auto;
			height: 90rpx;
			background: #fb9b1c;
			font-size: 28rpx;
			line-height: 90rpx;
			color: #fff;
			border-radius: 10px;
		}
	}
</style>